import React, {Component} from 'react';
import {PageContainer} from "@ant-design/pro-components";
import {message, Space, Table, Tag, Text} from 'antd';
import type { ColumnsType } from 'antd/lib/table';
import { Button } from 'antd';
import {Link} from "umi";
import {request} from "umi";
import {getUserInfo, MergeMenu, ShowError} from "@/utils/format";
import {QuerySubMenus} from "@/services/School/SchoolMenuApi";
import {ServerMessages} from "@/services/ServerMessages";

class InternationalContacts extends Component {
  state = {
    loading: true,
    data: []
  }

  componentDidMount() {

    let data = [
      {
        key: '2_4_1',
        name: '来本学科攻读学位的国（境）外留学生（本、硕、博）及博士后、交流学者情况',
        circle: '一年一次',
        target: '学科填报',
        flag: 1,
        to: '/cultivate-talents/international-contacts/scholar-counts',
      },
      {
        key: '2_4_2',
        name: '本科生、硕士生、博士生参加本领域国内外重要学术会议并作报告人员清单',
        circle: '一年一次',
        target: '学科填报',
        flag: 1,
        to: '/cultivate-talents/international-contacts/conference-counts',
      },
    ]
    // 将 response 的 flag 映射到 data 的 flag 上
    // this.setState({loading: false, data})

    QuerySubMenus('2_4').then(response => {
      console.log("@返回数据", response)
      data = MergeMenu(data, response)
      this.setState({loading: false, data})
    }, () => {
      ShowError(ServerMessages.error_message)
    })

  }

  render() {

    const columns = [
      {
        title: '监测点',
        dataIndex: 'name',
        key: 'name',
        render: text => <b>{text}</b>,
      },
      {
        title: '填报周期',
        dataIndex: 'circle',
        key: 'circle',
        render: text => <b>{text}</b>
      },
      {
        title: '填报对象',
        dataIndex: 'target',
        key: 'target',
      },
      {
        title: '操作',
        key: 'action',
        render: (_, record) => (
          <Space size="middle">
            {record.is_period === 0 && (
              <Button type="primary" disabled>未到填报时间</Button>
            )}
            {record.is_period === 1 && record.is_filled === 1 && (
              <>
                <Button type="primary" disabled>已填报</Button>
                <Link to={record.to+"?flag=display"}><Button type="default">查看</Button></Link>
              </>
            )}
            {record.is_period === 1 && record.is_filled === 0 && (
              <Link to={record.to}><Button type="primary">填报</Button></Link>
            )}


          </Space>
        ),
      },
    ];

    return (
      <PageContainer header={{
        title: '请选择填报项目',
        breadcrumb: {},
      }}
      >
        <Table loading={this.state.loading} columns={columns} dataSource={this.state.data} pagination={{pageSize: 100}} />
      </PageContainer>
    );
  }
}

export default InternationalContacts;
